<!-- 销售业绩排行 -->
<template>
	<view class="rank-wrap">
		<scroll-view scroll-y="true" class="scroll-box">

			<!-- 今日销售业绩排行 -->
			<view class="rank-card">
				<view class="title-rank">今日销售业绩排行</view>
				<view class="rank-header">
					<view class="rank-number">排名</view>
					<view class="user-id">用户ID</view>
					<view class="user-account">用户昵称</view>
					<view class="user-total">销售业绩</view>
				</view>
				<view class="rank-item" v-for="(item, index) in rankingsList.today">
					<view class="rank-number">
						<text class="tag-text" v-if="index >= 3">{{ index + 1 }}</text>
						<image v-else class="tag-icon" :src="rankingsIcon[index]" mode=""></image>
					</view>
					<view class="user-id">{{ item.member_id }}</view>
					<view class="user-account">
						<view class="user-info">
							<view class="name u-m-b-10">{{ item.nickname || '当前用户已注销' }}</view>
						</view>
					</view>
					<view class="user-total">{{ item.consume }}</view>
				</view>
			</view>
			
			<!-- 昨日销售业绩排行 -->
			<view class="rank-card">
				<view class="title-rank">昨日销售业绩排行</view>
				<view class="rank-header">
					<view class="rank-number">排名</view>
					<view class="user-id">用户ID</view>
					<view class="user-account">用户昵称</view>
					<view class="user-total">销售业绩</view>
				</view>
				<view class="rank-item" v-for="(item, index) in rankingsList.yesterday">
					<view class="rank-number">
						<text class="tag-text" v-if="index >= 3">{{ index + 1 }}</text>
						<image v-else class="tag-icon" :src="rankingsIcon[index]" mode=""></image>
					</view>
					<view class="user-id">{{ item.member_id }}</view>
					<view class="user-account">
						<view class="user-info">
							<view class="name u-m-b-10">{{ item.nickname || '当前用户已注销' }}</view>
						</view>
					</view>
					<view class="user-total">{{ item.consume }}</view>
				</view>
			</view>
			
			<!-- 本周销售业绩排行 -->
			<view class="rank-card">
				<view class="title-rank">本周销售业绩排行</view>
				<view class="rank-header">
					<view class="rank-number">排名</view>
					<view class="user-id">用户ID</view>
					<view class="user-account">用户昵称</view>
					<view class="user-total">销售业绩</view>
				</view>
				<view class="rank-item" v-for="(item, index) in rankingsList.thisweek">
					<view class="rank-number">
						<text class="tag-text" v-if="index >= 3">{{ index + 1 }}</text>
						<image v-else class="tag-icon" :src="rankingsIcon[index]" mode=""></image>
					</view>
					<view class="user-id">{{ item.member_id }}</view>
					<view class="user-account">
						<view class="user-info">
							<view class="name u-m-b-10">{{ item.nickname || '当前用户已注销' }}</view>
						</view>
					</view>
					<view class="user-total">{{ item.consume }}</view>
				</view>
			</view>
			
			<!-- 上周销售业绩排行 -->
			<view class="rank-card">
				<view class="title-rank">上周销售业绩排行</view>
				<view class="rank-header">
					<view class="rank-number">排名</view>
					<view class="user-id">用户ID</view>
					<view class="user-account">用户昵称</view>
					<view class="user-total">销售业绩</view>
				</view>
				<view class="rank-item" v-for="(item, index) in rankingsList.lastweek">
					<view class="rank-number">
						<text class="tag-text" v-if="index >= 3">{{ index + 1 }}</text>
						<image v-else class="tag-icon" :src="rankingsIcon[index]" mode=""></image>
					</view>
					<view class="user-id">{{ item.member_id }}</view>
					<view class="user-account">
						<view class="user-info">
							<view class="name u-m-b-10">{{ item.nickname || '当前用户已注销' }}</view>
						</view>
					</view>
					<view class="user-total">{{ item.consume }}</view>
				</view>
			</view>
			
			<!-- 本月销售业绩排行 -->
			<view class="rank-card">
				<view class="title-rank">本月销售业绩排行</view>
				<view class="rank-header">
					<view class="rank-number">排名</view>
					<view class="user-id">用户ID</view>
					<view class="user-account">用户昵称</view>
					<view class="user-total">销售业绩</view>
				</view>
				<view class="rank-item" v-for="(item, index) in rankingsList.thismonth">
					<view class="rank-number">
						<text class="tag-text" v-if="index >= 3">{{ index + 1 }}</text>
						<image v-else class="tag-icon" :src="rankingsIcon[index]" mode=""></image>
					</view>
					<view class="user-id">{{ item.member_id }}</view>
					<view class="user-account">
						<view class="user-info">
							<view class="name u-m-b-10">{{ item.nickname || '当前用户已注销' }}</view>
						</view>
					</view>
					<view class="user-total">{{ item.consume }}</view>
				</view>
			</view>
			
			<!-- 上月销售业绩排行 -->
			<view class="rank-card">
				<view class="title-rank">上月销售业绩排行</view>
				<view class="rank-header">
					<view class="rank-number">排名</view>
					<view class="user-id">用户ID</view>
					<view class="user-account">用户昵称</view>
					<view class="user-total">销售业绩</view>
				</view>
				<view class="rank-item" v-for="(item, index) in rankingsList.lastmonth">
					<view class="rank-number">
						<text class="tag-text" v-if="index >= 3">{{ index + 1 }}</text>
						<image v-else class="tag-icon" :src="rankingsIcon[index]" mode=""></image>
					</view>
					<view class="user-id">{{ item.member_id }}</view>
					<view class="user-account">
						<view class="user-info">
							<view class="name u-m-b-10">{{ item.nickname || '当前用户已注销' }}</view>
						</view>
					</view>
					<view class="user-total">{{ item.consume }}</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			backTextStyle: {
				color: '#fff',
				fontSize: '40rpx',
				fontWeight: '500'
			},
			rankingsIcon: {
				0: this.$IMG_URL + '/imgs/commission/01.png',
				1: this.$IMG_URL + '/imgs/commission/02.png',
				2: this.$IMG_URL + '/imgs/commission/03.png'
			},
			rankingsList: {
				today: [],
				yesterday: [],
				thisweek: [],
				lastweek: [],
				thismonth: [],
				lastmonth: []
			}
		};
	},
	computed: {},
	onLoad() {
		this.getRankings();
	},
	methods: {
		getRankings() {
			let that = this;
			that.$http('agent.ranking').then(res => {
				if (res.code === 1) {
					that.rankingsList = res.data;
				}
			});
		}
	}
};
</script>

<style lang="scss">
page{ background: #f1f1f1;}
.rank-wrap {
	//background: url($IMG_URL+'/imgs/commission/rankings_bg.png') no-repeat;
	//background-size: 100% auto;
	height: 100%;
	overflow: hidden;
}

// 排行榜列表

.rank-card{
	border-radius: 20rpx;
    background: #fff;
	width:710rpx;
	margin:20rpx;
	padding:20rpx;
	box-sizing:border-box;
	.title-rank {
		font-weight: bold;
	}
	.rank-header{
		display:flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		font-size:24rpx;
		line-height:80rpx;
		
		.rank-number{
			width:80rpx;
			height:80rpx;
			text-align: center;
		}
		.user-id{
			width:160rpx;
			height:80rpx;
			text-align: center;
		}
		.user-account{
			width:220rpx;
			height:80rpx;
			text-align: left;
			display:flex;
			align-items: center;
			.user-avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
		.user-total{
			width:190rpx;
			height:80rpx;
			text-align:right;
		}
	}
	.rank-item{
		display:flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		font-size:24rpx;
		line-height:80rpx;

		.rank-number{
			width:80rpx;
			height:80rpx;
			text-align: center;

			.tag-icon {
				width: 40rpx;
				height: 60rpx;
			}
		}
		.user-id{
			width:160rpx;
			height:80rpx;
			text-align: center;
		}
		.user-account{
			width: 230rpx;
			height: 80rpx;
			text-align: left;
			display: flex;
			align-items: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			.user-avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
		.user-total{
			width:190rpx;
			height:80rpx;
			text-align:right;
		}
	}
}
</style>
